<template>
    <div class="Search">
        <div class="SearchBox" @click="active">
            <span>添加好友</span>
            <img src="../assets/SVG/sreach.svg" alt="">
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router"
const router = useRouter()
const active = () => {
    router.push({
        name: "/AddBuddy"
    })
}

</script>

<style scoped lang="scss">
.Search {
    width: 100%;

}

.SearchBox {
    margin: 0 auto;
    width: 80%;
    background: #fff;
    border-radius: 20px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;

    span {
        vertical-align: middle;

    }

    img {
        width: 26px;
        height: 26px;
        vertical-align: middle;
        margin-left: 10px;
    }
}
</style>